<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>mamma</title>

<link rel="shortcut icon" href="../image/icon_mamma.ico">
<link rel="stylesheet" href="../js/jquery-ui-1.11.1.custom/jquery-ui.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="../js/animations-master/assets/css/animations.min.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="../js/BreakingNews/BreakingNews.css" />
<link rel="stylesheet" href="../css/account/home.css">
<link rel="stylesheet" href="../css/friends/friends.css" />
<link rel="stylesheet" href="../css/account/firstBaby.css">
<link href="../js/mainCal/jquery.event.calendar.css" rel="stylesheet" />
<link href="../js/mainCal/orange.event.calendar.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/NotificationStyles/css/ns-default.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/NotificationStyles/css/ns-style-other.css" />
	
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/jquery-ui-1.11.1.custom/jquery-ui.min.js"></script>
<script src="../js/chart/Chart.js"></script>
<script src="../js/animations-master/assets/js/appear.min.js" type="text/javascript"></script>
<script src="../js/animations-master/assets/js/animations.min.js" type="text/javascript"></script>
<script src="../js/BreakingNews/BreakingNews.js"></script>
<script src="../js/home/imageGallery.js"></script>
<script src="../js/imgLiquid-min.js"></script>
<script src="../js/home/firstBaby.js"></script>
<script src="../js/jquery.slimscroll.min.js"></script>
<script src="../js/jquery.form.js"></script>
<script src="../js/mainCal/jquery.event.calendar.js"></script>
<script src="../js/mainCal/jquery.event.calendar.en.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="../js/noti/modernizr.custom.js"></script>

<script type="text/javascript">
/* the page is loaded */
$(document).ready(function() {
	// adopt the effect that is 'display none' to some div for fadeIn effects
	if('${memberVo.hasBaby}' == 'Y'){
		loadingInfo(1, <s:property value='babyList[0].babynum' />);
		$('#calendar').eCalendar({
			ajaxDayLoader: ""
			, ajaxEventLoader: ""
			, endMonth: new Date().getMonth()
			, endYear: new Date().getFullYear()
			, onClickDay: function(){
				return;
			}
		});
		
		// tab lodaing
		$( "#tabs" ).tabs();
		$('.tabAndCalendar').css('display', 'none');
	}
	else {
		$('.hasNoBaby').css('display', 'none');
	}
	
	// photo
	if('${photoList.size()}' == 0) $('.noPhoto').css('display', 'none');
	else $('.photoZone').css('display', 'none');
		
	photoEffect();
	selectBreakingNews();
	breakingNews();
	selectEvent();
	
	profileMenu();
	firstBabyAdd();
	searchMenu('../friends/');
	
	insert();
	upload();
	photoTrigger();
	photoFlip()
	
	// fadeIn effects
	$('.profile').fadeIn('slow');
	$('.myPhoto').fadeIn('slow');
	if('${memberVo.hasBaby}' == 'Y'){
		$('.tabAndCalendar').fadeIn('slow');
		
		// add more babies
		$('div.addBabyMore').on('click', function(){
			$('div.addYourBaby').fadeIn();
		});
	}
	else $('.hasNoBaby').fadeIn('slow');
	
	if('${photoList.size()}' == 0){
		$('.noPhoto').fadeIn('slow');
		// fade in the photo upload form
		$('.firstPhoto').click(function(){
			$('body, html').animate({
				scrollTop: '300px'
			});
			$('div.radio1 div.insertPhoto').trigger('click');
			$('#form1 textarea').focus();
		});
	}
	else $('.photoZone').fadeIn('slow');
	
	
	$(".myPhoto").imgLiquid();
	$("div.writer .writerPhoto").imgLiquid();
	$("div.userPhoto").imgLiquid();
	$("div.photoComment .commentPhoto").imgLiquid();
	$("div.photoCommentList").slimscroll({
		height: '550px'
	});
});

//프로필 버튼 클릭 이벤트 & 사진 클릭 이벤트
$(function changeProfilePicture() {
	$('#profileButton').on('click',function(){
		location.href="../photo/profileUploadForm.action";
	});
});

// breaking news
function breakingNews(){
	$("#breakingnews").BreakingNews({
		background		:"#FFFFFF",
		title			:"<i class='fa fa-check-square-o'></i>",
		titlecolor		:"#FFF",
		titlebgcolor	:"#FF5459",
		linkcolor		:"#FF5459",
		linkhovercolor	:"#FF5459",
		fonttextsize	:16,
		isbold			:false,
		border			:"solid 2px #FF5459",
		width			:"98%",
		timer			:2000,
		autoplay		:true,
		effect			:"fade"
	});
}

function selectBreakingNews(){
	var email = "<s:property value='email' />";
	if(email == "") return;
	
	$.ajax({
		url: "../calendar/selectNews.action"
		, type: "POST"
		, dataType: "json"
		, success: function(json){
			var list = json.infoList;
			if(list.length == 0){
				$('#breakingnews ul').html('<li>공지사항이 없습니다.</li>');
				return;
			}
			var html = "";
			for(var i = 0; i < list.length; i++){
				html += "<li>"+(i+1)+". "+list[i].infoName+"</li>";
			}
			$('#breakingnews ul').html(html);
		}
	});
}

function selectEvent(){
	$.ajax({
		url: "../calendar/calendarList.action"
		, type: "POST"
		, dataType: "json"
		, success: function(json){
			var array = [json.infoList.length];
			$.each(json.infoList, function(index, item){
				if(item.startDate.substring(5,7) == new Date().getMonth()+1){
					array[index] = item.startDate.substring(8, 10);
				}
			});
			$.each($('#calendar div.hb-days span.hb-day'), function(){
				$(this).removeAttr('href');
				for(var j = 0; j < array.length; j++){
					if($(this).text() == array[j]){
						$(this).addClass('hb-day-active');
					}
				}	
			});
			$('#hb-event-list').remove();
			$('a.hb-current-month').attr('href', "../calendar/goCalendar.action?email=<s:property value='email' />");
		}
	});
}

// profile menu
function profileMenu() {
	$('div.info').click(function(){
		$('#profileMenu').toggle();	
	});
}

// request
function request(email){
	$.ajax({
		url: "../friends/sendRequest.action"
		, type: "POST"
		, dataType: "json"
		, data: {
			email: email
		}
		, success: function(){
			var html = '<i class="fa fa-check-square"></i> 요청 완료';
			$('button.requestButton').html(html);
			$('button.requestButton').css('background-color', '#FF5459');
			$('button.requestButton').css('color', 'white');
			$('button.requestButton').css('border', '0');
			$('button.requestButton').click(false);
		}
	});
}

function cancelRequest(email){
	$.ajax({
		url: "../friends/cancelRequest.action"
		, type: "POST"
		, dataType: "json"
		, data: {
			email: email
		}
		, success: function(){
			var html = '<i class="fa fa-check-square"></i> 친구 요청';
			var button = $('button.done');
			button.html(html);
			button.addClass('requestButton');
			button.attr('onclick', 'javascript:request("'+email+'")');
			button.click(true);
		}
	});
}

// photo
function insert(){
	$('div.radio1 div.insertPhoto').on('click', function(){
		$('div.radio1 .insertPhotoFrame').fadeToggle();
	});
}

function upload(){
		$('#form1 input').button();
		var bar = $('#progressbar').progressbar({
		      value: 0
		});
		
		$("#form1 input[type='file']").change(function() {
		    readURL(this);
		});
		
		$('#form1 textarea').on('keyup', function(){
			var length = $(this).val().length;
			
			if(length > 300) $('div.typeWord').css('color', 'red');
			else $('div.typeWord').css('color', 'black');
			
			var html = '<span class="length">글자수 '+length+'/300</span>';
			$('#form1 div.typeWord').html(html);
		});
		
		$('#form1').ajaxForm({
			beforeSubmit: function() {
	            bar.val(0);
			}
			, uploadProgress: function(event, position, total, percentComplete){
				bar.val(percentComplete);
			}
			, error: function(){
				alert('error');
			}
			, complete: function(){
				$('div.radio1 .insertPhotoFrame').fadeOut();
				$('div.profilePhotoFrame').attr('style', '');
				$('div.typeWord span.length').text('글자수 0/300');
				
				var zone = $('.noPhoto');
				// 첫번째로 올린다면 noPhoto이므로 바꿔서 올려준다
				if(zone.attr('id') == null){
					zone.attr('id', 'photoZone');
					zone.removeAttr('class');
					zone.html('<ul id="addUl"></ul>');
				}
				
				addPhotoEffect(1);
			}
			, clearForm: true
		});
}

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#form1 div.profilePhotoFrame img').attr('src', e.target.result);
            $('#form1 div.profilePhotoFrame').imgLiquid();
        }

        reader.readAsDataURL(input.files[0]);
	}
}

/// photo=========================================

// photo window effect
function photoEffect(){
	$('#photoZone .photoSumnail').on('mouseenter', function(){
		var num = $(this).attr('data-photo-num');
		$('#photoZone .photoSumnail[data-photo-num='+num+']').addClass("newPhotoSumnail", 100);
		$('#photoZone .photoSumnail[data-photo-num='+num+'] img').addClass('newImagePosition', 100);
		$('#photoZone .photoSumnail[data-photo-num='+num+'] img').removeClass("imagePosition", 100);
		$('#photoZone .photoSumnail[data-photo-num='+num+'] span.date').css('display', 'block');
		$('#photoZone .photoSumnail[data-photo-num='+num+'] span.etc').css('display', 'block');
	});
	$('#photoZone .photoSumnail').on('mouseleave', function(){
		var num = $(this).attr('data-photo-num');
		$('#photoZone .photoSumnail[data-photo-num='+num+']').removeClass("newPhotoSumnail", 100);
		$('#photoZone .photoSumnail[data-photo-num='+num+'] img').addClass("imagePosition", 100);
		$('#photoZone .photoSumnail[data-photo-num='+num+'] img').removeClass('newImagePosition', 100);
		$('#photoZone .photoSumnail[data-photo-num='+num+'] span.date').css('display', 'none');
		$('#photoZone .photoSumnail[data-photo-num='+num+'] span.etc').css('display', 'none');
	});
}
	
function addPhotoEffect(page){
	$.ajax({
		url: '../photo/photoList.action'
		, type: 'POST'
		, dataType: 'json'
		, data: {page: page, email: '<s:property value='email' />'}
		, success: function(json){
			var list = json.photoList;
			var html = "";
			$.each(list, function(index, item){
				html += '<li>';
				html += '<a href="javascript:openPhoto('+item.id+', \''+item.email+'\')">';
				html += '<div class="imageWindow">';
				html += '<div class="photoSumnail animate-in" data-photo-num="'+item.id+'" data-anim-type="bounce-in-up">';
				html += '<img class="imagePosition" src="../photoData/'+item.savedFile+'">';
				html += '<span class="date"><br>'+item.inputdate+'</span>';
				html += '<span class="etc">';
				html += '<i class="fa fa-thumbs-o-up"></i> '+item.likeit+' &nbsp;&nbsp;';
				html += ('<i class="fa fa-comment"></i> '+item.commentCnt);
				html += '</span></div></div></a></li>';
			});
			
			if(page == 1)
			$('#addUl').html('');
			
			$('#addUl').append(html);
			
			if(page == json.lastPage){
				$('#loadMore a').attr('href', '#');
				$('#loadMore').css('display', 'none');
			}
			else{
				$('#loadMore a').attr('href', "javascript:addPhotoEffect("+(page+1)+")");
			}

			$('.animate-in').each(function(i, elem) {
				// Vars
					var	type = $(elem).attr('data-anim-type'),
						delay = $(elem).attr('data-anim-delay');

				// Animate as element appears into viewport
					$(elem).appear(function () {
						// Animate
							setTimeout(function() {
								$(elem).addClass('animating').addClass(type).removeClass('animate-in');
							}, delay);

						// On animation end
							$(elem).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
								// Clear animation
									$(elem).removeClass('animating').removeClass(effects.join(' '));
							});
					}, { accX: 0, accY: -100 });
			});
			$('div.photoSumnail').imgLiquid();
			if(page == 1){
				$('body, html').animate({
					scrollTop: 890+'px'
				});
			}
			photoEffect();
			$('#loadMore img').css('display', 'none');
			photoFlip();
		}
	});
}

function photoTrigger (){
$(document).scroll(function(){
		var docHeight = $(document).height();
		var displayHeight = $(window).height();
		var scrollTop = $(window).scrollTop();
		if(docHeight == (displayHeight+scrollTop)){
			var href = $('#loadMore a').attr('href');
			if(href == '#') return;
			window.location = href;
			$('#loadMore img').css('display', 'block');
			$('#loadMore a').html('');
		}
	});
}

// ======================== chart
// lodaing the baby's infomation
function loadingInfo(num, babynum){
	$('#loading').show();
	
	var html = "";
	html += '<div class="babybook"><br>';
	html += '<div class="babybookGraph" id="container'+(num*2-1)+'"></div>';
	html += '<div class="growing"><br>';
	html += '<div class="growingGraph" id="container'+(num*2)+'">';
	html += '</div></div>';
	
	$('#tabs-'+num).html(html);
	
	/* 성장 */
	pieDataOutput((num*2-1), babynum);

	/* 일지 */
	chartDataOutput((num*2), babynum);
}

function chartDataOutput(num, babynum){
	var babyHeight = new Array();
	var babyWeight = new Array();
	var babyHeadsize = new Array();
	var babyInputdate = new Array();
		
	var index = 0;
	
	$.ajax({
		url: "../baby/listBabyInfoThree.action"
		, type: "POST"
		, dataType: "json"
		, data: {babynum: babynum}
		, success: function(msg){
			
			$.each(msg.list, function(key, item){
				babyHeight[index] = item.height;
				babyWeight[index] = item.weight;
				babyHeadsize[index] = item.headsize;
				babyInputdate[index] = item.inputdate;
				
				index = index + 1;
		    });
		    
			//그래프(차트)구현
		    $('#container'+num).highcharts({
		        chart: {type: 'column'},
		        title: {text: ''},
		        colors: [
		                 '#FFC2D6', '#FF75D1', '#FF0066'
		             ],
		        xAxis: {categories: babyInputdate},
		        yAxis: {min:0, title:{text:'키/몸무게/머리둘레'}},
		        tooltip: {
		           headerFormat: '<span style="font-size: 10px">{point.key}</span><table>',
		           pointFormat: '<tr><td style = "color{series.color};padding:0">{series.name}:</td>' +
		                     '<td style = "padding:0"><b>{point.y:1f}\</b></td></tr>',
		           footerFormat: '<table>',
		           shared: true,
		           useHTML: true
		        },
		        plotOptions: {
		           column: {
		              pointPadding: 0.2,
		              borderWidth: 0
		           }
		        },
		        series: [{name: '키(cm)',
		              data: babyHeight},   
		        
		              {name: '몸무게(kg)',
		              data: babyWeight},
		        
		             {name: '머리둘레(cm)',
		              data: babyHeadsize},
		        ]
		     });
		}
	});
	$('#loading').hide();
}


function pieDataOutput(chartNum, babynum){
	/* alert('과연?'); */
	
	var babySuyu = new Array();
	var babySobyun = new Array();
	var babyPlay = new Array();
	var babyInputdate = new Array();
	
	/* var weakCount = new Array(); */
	var index = 0;
	var babySuyuData;
	var babySobyunData;
	var babyPlayData;
	
	$.ajax({
		url: "../baby/listBabyData.action"
		, type: "POST"
		, dataType: "json"
		, data: {babynum: babynum, inputdate: ''}
		, success: function(msg){
			//원형차트구현
			$('#container'+chartNum).highcharts({
		        chart: {
		            plotBackgroundColor: null,
		            plotBorderWidth: 1,//null,
		            plotShadow: false
		        },
		        colors: [
							'#FFC2D6', '#FF75D1', '#FF0066', '#FF5459'
		          ],
		        tooltip: {
		            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		        },
		        title: '',
		        plotOptions: {
		            pie: {
		                allowPointSelect: true,
		                cursor: 'pointer',
		                dataLabels: {
		                    enabled: true,
		                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
		                    style: {
		                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
		                    }
		                }
		            }
		        },
		        series: [{
		            type: 'pie',
		            name: 'Browser share',
		            data: [
		                ['수유횟수', msg.babyData.suyu],
		                ['소변', msg.babyData.sobyun],
		                ['대변', msg.babyData.ungga],
		                ['이유식', msg.babyData.liyusik],
		                ['보채기', msg.babyData.bochaegi],
		                ['기저귀', msg.babyData.diapers],
						['놀이(교감)', msg.babyData.play]
					]
		        }]
		    });
		}/* ajax: success */
	});/* ajax */
}




// ================== friend
function goFriendPage(email){
	location.href='../member/goFriendPage.action?email='+email;
}

function goChartPage(email){
	location.href='../baby/goBabyInfo.action?email='+email;
}
var fliper;
function photoFlip(){
	if(fliper != null) clearInterval(fliper);
	
	var array = [$('#addUl li img').length];
	var flip = $('#photoFlip div');
	var li = $('#addUl li img');
	
	$.each(li, function(index, item){
		array[index] = item.src;
	});
	if(array.length < 2) return;
 	$.each(flip, function(index, item){
 		$(this).attr('data-flip', index);
 		var random1 = Math.floor(Math.random() * array.length);
		$(this).html('<img src="'+array[random1]+'">');
	});
 	flip.fadeIn('slow');
 	flip.imgLiquid();
 	
 	fliper = setInterval(function(){
 		var random1 = Math.floor(Math.random() * array.length);
 		var random2 = Math.floor(Math.random() * 10);
 		var flipDiv = $('#photoFlip div[data-flip="'+random2+'"]');
 		flipDiv.html('<img src="'+array[random1]+'">');
 	 	flipDiv.imgLiquid();
 	}, 3000);
}
</script>
</head>
<body>
<h2>메인페이지</h2>
<script src="../js/noti/notificationFx.js"></script>
<script src="../js/noti/classie.js"></script>
<script>
var text = "";
$.ajax({
	url: "../admin/selectVac.action"
	, type: "POST"
	, dataType: "json"
	, data: {
		email: '<s:property value="email" />'
	}
	, error: function(){}
	, success: function(json){
		var jlist = json.jlist;
		var length = jlist.length-1;
		var etc = "";
		if(length > 0) etc = " 외 "+length+"개의 ";
		
		text = jlist[0].name+"의 "+jlist[0].title+etc+" 알람이 있습니다. 예방 접종을 해주세요!";
		
		var notification = new NotificationFx({
			message : '<p>'+text+'</p>',
			layout : 'other',
			effect : 'boxspinner',
			ttl : 9000,
			type : 'notice' // notice, warning or error
		});
			// show the notification
		notification.show();
	}
});
</script>
<jsp:include page="../account/header.jsp" />

<!-- 메인 콘텐츠 부분 -->
<div id="home">
	<div class="mainForm content mainHome">
		<div id="photoFlip">
			<div data-num="2"></div>
			<div data-num="3"></div>
			<div data-num="2"></div>
			<div data-num="3"></div>
			
			<div data-num="1"></div>
			
			<div data-num="2"></div>
			<div data-num="3"></div>
			<div data-num="2"></div>
			<div data-num="3"></div>
		</div>
	
		<!-- 사진을 보여주는 곳 -->
		<div class="profile">
			<div class="myPhoto">
			<s:if test='%{savedFile != null}'>
				<img id="profilePicture" src="../photoData/${savedFile}" />
			</s:if>
			<s:else>
				<img id="profilePicture" src="../image/profile.png"  />
			</s:else>
			</div>
			<s:if test="%{loginId == email}">
				<br><input id="profileButton" type="button" value="${memberVo.name}의 프로필" />
			</s:if>
			<s:elseif test="%{loginId != null}"><br>
				<s:if test="%{friendVo.status == 1}">
					<button class="requestButton weAreFriends" >
						<i class="fa fa-users"></i> 친구 사이
					</button>
				</s:if>
				<s:elseif test="%{friendVo.requestEmail == loginId}">
					<button class="requestButton done" onclick="javascript:cancelRequest('<s:property value="friendVo.email" />')">
						<i class="fa fa-times"></i> 요청 취소
					</button>
				</s:elseif>
				<s:elseif test="%{friendVo.email == loginId}">
					<button class="requestButton recieve"
						onclick='location.href="../member/goFindFriend.action?emai	l="<s:property value="friendVo.requestEmail" />'>
						<i class="fa fa-check-square"></i> 요청 받음
					</button>
				</s:elseif>
				<s:else>
					<button class="requestButton" 
						onclick="javascript:request('<s:property value='memberVo.email' />')">
						<i class="fa fa-plus-square"></i> 친구 요청
					</button>
				</s:else>
			</s:elseif>
	    </div>
		<!-- 프로필 사진 아래 글 등을 보여주는 곳 -->
		<div class="profile2">
			<!-- 이름과 좌우명 같은 걸 보여주는 곳 -->
			<div class="namespace">
				<span class="name">${memberVo.name} <span class="nickname">(${memberVo.nickname})</span></span><br><br>
				<span class="message"></span>
			</div>
			<!-- 프로필 오른쪽 버튼 3개 -->
			
			<div id="radio">
			    <div class="radio1">
			    <s:if test="%{loginId == email}">
					<div class="insertPhotoFrame">
						<!-- 사진 업로드 내용 -->
					    <form id="form1" method="post" enctype="multipart/form-data" action="../photo/insertPhoto.action"  >
					    	<textarea class="textarea" name="photo.content" rows="" cols=""></textarea><br><br>
					        <input type='file' id="upload" name="upload" onchange="readURL(this)"/>
					        <input type="hidden" name="page" value="1" />
					        <div class="profilePhotoFrame">
					        	<img src=""></img>
					        </div>
					        <div class="typeWord"><span class="length">글자수 0/300</span></div>
					        <input type="submit" value="업로드" >
					    </form>
					    
					</div>
					<div class="insertPhoto"><i class="fa fa-camera-retro"></i></div>
				</s:if>
			    </div>
			    <div class="radio2">
					<div class="myFriend" onclick="javascript:goFriendPage('<s:property value='email' />')">
						<i class="fa fa-users"></i>
					</div>
			    </div>
			    <div class="radio3">
			    <s:if test="%{loginId == email}">
			    	<s:if test='%{memberVo.hasBaby=="Y"}'>
						<div class="chart" onclick="javascript:goChartPage('<s:property value='email' />')">
							<i class="fa fa-area-chart"></i>
						</div>
					</s:if>
				</s:if>
			    </div>
		  	</div>
		  	
		</div>
	</div>
	<div class="mainForm graph mainHome"><br>
	
	<!-- this area is showing babies' status -->
	<s:if test="%{loginId == email || friendVo.status == 1}">
		<s:if test='%{memberVo.hasBaby=="N"}'>
			<!-- if the user doesn't have any babies, this area will appear.('N' means No) -->
			<div class="hasNoBaby">
				<s:if test="%{loginId == email}">
					<div class="firstBabyBook">
						<i class="fa fa-plus-square-o"></i><br>
						<span class="firstBabyBook">육아일지<br>
						시작하기</span>
					</div>
				</s:if>
				<s:else>
					<div class="otherUserAccess">
						<span class="firstBabyBook">등록된 글이<br>
						없습니다</span>
					</div>
				</s:else>
			</div>
			<div class="addYourBaby option1">
				<jsp:include page="babyInfoWrite.jsp"></jsp:include>
			</div>
		</s:if>
		<s:else>
			<!-- if the user has babies, this area will appear. -->
			<div class="tabAndCalendar">
				<div id="loading"><img src="../image/signup/ajax-loader2.gif"></div>
				<div id="tabs">
					<!-- 탭을 표현해주는 곳 -->
					<ul>
					<s:iterator value="babyList" status="list">
						<li onclick="javascript:loadingInfo(<s:property value="#list.count" />, <s:property value="babynum" />)">
							<a href="#tabs-<s:property value="#list.count" />"><s:property value='name' /></a>
						</li>
					</s:iterator>
					</ul>
					<!-- 탭이 구현되는 곳: ajax로 불러오므로 div만 필 -->
					<s:iterator value="babyList" status="list">
						<div id="tabs-<s:property value="#list.count" />" class="graphAll"></div>
					</s:iterator>
				</div>
				<div id="calendar"></div>
				<s:if test="%{loginId == email}">
				<div class="addBabyMore">
					<i class="fa fa-plus-square-o"></i>
				</div>
				</s:if>
				<div class="addYourBaby option2">
				<jsp:include page="babyInfoWrite.jsp"></jsp:include>
				</div>
			</div> <!-- end of div named 'tabs'  -->
		</s:else>
	</s:if>
	<s:else>
		<div class="not_friend">
			<div class="otherUserAccess">
				<span class="not_friend">친구 사이가 아닙니다!</span>
			</div>
		</div>
	</s:else>
		<br>
		<br>
		<!-- the info div like breaking news -->
		<s:if test="%{loginId == email}">
			<div class="BreakingNewsController easing" id="breakingnews">
	        	<div class="bn-title"></div>
	            <ul>
	            </ul>
	            <div class="bn-arrows"><span class="bn-arrows-left"></span><span class="bn-arrows-right"></span></div>	
	        </div>
	        <br>
        </s:if>
        <br>
        <br>
		<!-- this area is showing the user's photos -->
	<s:if test="%{loginId == email || friendVo.status == 1}">
		<s:if test='%{photoList == null || photoList.size() == 0}'>
			<script type="text/javascript">
				$('#home').css('height', '800px');			
			</script>
			<div class="noPhoto">
					<div class="firstPhoto">
						<s:if test="%{loginId == email}">
							<i class="fa fa-camera-retro"></i><br>
							<span class="firstPhoto">소중한 순간<br>
							기억하기</span>
						</s:if>
						<s:else>
							<span class="firstPhoto">등록된 사진이<br>
							없습니다</span>
						</s:else>
					</div>
			</div>
			<br>
		</s:if>
		<s:else>
			<div id="photoZone">
					<ul id="addUl">
						<s:iterator id="photoList" value="photoList">
							<li>
								<a href="javascript:openPhoto(<s:property value='id' />, '<s:property value="email" />')">
									<div class="imageWindow">
										<div class="photoSumnail animate-in" data-photo-num="<s:property value='id' />" data-anim-type="bounce-in-up">
											<img class="imagePosition" src="../photoData/<s:property value='savedFile' />">
											<span class="date"><br><s:property value='inputdate' /></span>
											<span class="etc">
												<i class="fa fa-thumbs-o-up"></i> 
												<span class="likeit">
													<s:property value="likeit" /> &nbsp;&nbsp;
												</span>
												<i class="fa fa-comment"></i> <s:property value="commentCnt" />
											</span>
										</div>
									</div>
								</a>
							</li>
						</s:iterator>
					</ul>
				<script>
					$('div.photoSumnail').imgLiquid();
				</script>
			</div><!-- div photoZone  -->
		</s:else>
		<s:if test="%{lastPage > 1}">
			<div id="loadMore">
				<img src="../image/signup/ajax-loader2.gif">
				<a href="javascript:addPhotoEffect(2)">
					더 불러오기
				</a>
			</div>
		</s:if>
		<s:else>
			<div id="loadMore" style="display: none; border-top: 1px solid gray;">
				<a href="#"></a>
			</div>
		</s:else>
	</s:if>
	<s:else>
		<div id="loadMore" style="display: none; border-top: 1px solid gray;">
				<a href="#"></a>
		</div>
		<div class="not_friend">
			<div class="otherUserAccess">
				<span class="not_friend">친구 사이가 아닙니다!</span>
			</div>
		</div>
	</s:else>
		
		<div id="footer">
				소개 지원 블로그 관련기사 API 채용정보 공개범위 약관
		</div>
	</div>
</div>

	<!-- photo dialog -->
	<div id="photoViewMain">
		<div class="photoView">
			<div class="photoViewFrame">
				<img src="">
			</div>
			<div class="photoNavi">
				<a class="dis naviPrev" href="">
					<div class="photoPrev"><i class="fa fa-chevron-left"></i></div>
				</a>
				<a class="dis naviNext" href=""><div class="photoNext">
					<i class="fa fa-chevron-right"></i></div>
				</a>
			</div>
		</div>
		
		
		<div class="photoComment">
			<!-- comment list -->
			<div class="photoCommentList">
				<div class="commentListFrame">
					<div class="writer">
						<div class="writerPhoto">
							<img src="">
						</div>
						<div class="writerInfo">
							<span class="writerName"></span><br>
							<span class="writerInputdate"></span><br>
						</div>
					</div>
					<div class="photoContent"><!-- photo content here --></div>
					<br>
					<div class="photoMenu">
						<a class="likeit" href="javacsript:likeit()">
							<i class="fa fa-thumbs-o-up"></i>좋아요
						</a>&nbsp;・&nbsp;
						<s:if test="%{loginId == email}">
							<a class="delete" href="javascript:deletePhoto()"><i class="fa fa-trash"></i>삭제</a>
						</s:if>
					</div>
					<br>
					<div class="contentLike">
						<i class="fa fa-thumbs-o-up"></i> <span class="likeit">명</span>이 이 사진을 좋아합니다.
					</div>
					<div class="contentLoad"><!-- loading the comments --></div>
					<div class="thisComment"></div>
				</div>
			</div>
			
			<!-- add comment -->
			<div class="addComment">
				<div class="commentPhotoFrame">
					<div class="commentPhoto">
						<s:if test='%{savedFile != null}'>
							<img id="profilePicture" src="../photoData/${savedFile}" />
						</s:if>
						<s:else>
							<img id="profilePicture" src="../image/profile.png"  />
						</s:else>
					</div>
				</div>
				<div class="commentInput">
					<input type="text" id="cmt" placeholder="댓글을 입력하세요" />
					<button id="commentInput">
						<label for="commentInput">
							등록
						</label>
					</button>
				</div>
			</div>
		</div>

	</div>
	<div id="back"></div>
</body>
</html>